<template>
  <div class="comment-tags">
    <span
      class="tag"
      :class="{ active: value === item }"
      v-for="item in tags"
      :key="item"
      @click="$emit('input',item)"
      >{{ item }}
    </span>
    <input
      ref="input"
      v-if="showInput"
      v-model="customTag"
      @blur="hide()"
      type="text"
      placeholder="请输入标签"
      @keyup.enter="$refs.input.blur()"
    />
    <span v-else @click="show()" class="tag">+自定义</span>
  </div>
</template>

<script>
export default {
  name: 'comment-tags',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      tags: [
        '穿着舒服',
        '漂亮精致',
        '简单大气',
        '尺寸适合',
        '性价比高',
        '值得拥有',
        '快递给力',
        '材质给力'
      ],
      showInput: false,
      customTag: ''
    }
  },
  methods: {
    show () {
      this.showInput = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    hide () {
      this.showInput = false
      if (this.customTag) {
        this.$emit('input', this.customTag)
        this.tags.push(this.customTag)
        this.customTag = ''
      }
    }
  }
}
</script>

<style scoped lang='less'>
.comment-tags {
  .tag {
    padding: 2px 13px;
    border: 1px solid #e4e4e4;
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 16px;
    cursor: pointer;
    &:hover,
    &.active {
      border-color: @xtxColor;
      color: @xtxColor;
    }
  }
  input {
    width: 84px;
    height: 26px;
    border: 1px solid #e4e4e4;
    padding: 0 5px;
  }
}
</style>
